<template>
    <Return></Return>
    <div class="bigBox">
        <div class="info">
            <div class="pic">
                <img src="" alt="">
            </div>
            <div class="infoText">
                <p class="title">{{ courseData.courseName }}</p>
                <div>
                    <span class="principal">负责人: {{ courseData.teachers[0].name }}</span>

                </div>
                <div style="width: 100%;">
                    <span class="deadline">课程开设时间:</span>
                    <span class="date" style="margin-left: 1%;">开始时间：{{ courseData.startDate }}</span>
                    <span class="date">结束时间：{{ courseData.endDate }}</span>
                </div>
            </div>
            <button class="showMember" @click="showMember">查看课程成员</button>
            <ShowMember :member="member" :showMemberWin="showMemberWin" @close="close"></ShowMember>
        </div>
        <div class="teacherList">
            <p class="subTitle" style="margin-top: 2%;">
            <div class="subTitleText">指导老师</div>
            <div class="edit">
                <span @click="teacherTableIndex = 0" style="margin-right: 18%;">取消</span>
                <span @click="teacherTableIndex = 1">编辑</span>
            </div>
            </p>
            <div class="teacherTable">
                <ShowTable :tableList="courseData.teachers" v-show="teacherTableIndex == 0"></ShowTable>
                <TeacherTable v-show="teacherTableIndex == 1"></TeacherTable>
            </div>
        </div>
        <div class="classContent">
            <p class="subTitle">
            <div class="subTitleText">课程内容</div>
            <div class="edit" @click="courseContentEdit"><span>编辑</span></div>
            </p>
            <div class="courseTable">
                <CourseContent :isCourseContentEdit="isCourseContentEdit" :courseCon="courseCon"></CourseContent>
            </div>
            <div class="chapterTable" style="margin-top: 37px;">
                <ChapterTable :cid="cid" :catalogue="courseData.courseCatalogue" :catalogueEdit="isCourseContentEdit"></ChapterTable>
            </div>
                    </div>
        <div class="but">
            <button @click="dialogVisible = true">目录视图</button>
        </div>
        <ChapterWin :dialogVisible="dialogVisible" :catalogue="courseData.courseCatalogue" @close="close"/>
    </div>
</template>
<script setup>
import ShowTable from '../../components/ShowTeacherTable.vue'
import TeacherTable from '../../components/TeacherTable.vue';
import CourseContent from '../../components/CourseContent.vue';
import ShowMember from '../../components/ShowMember.vue';
import Return from '../../components/Return.vue';
import ChapterTable from '../../components/ChapterTable.vue';
import ChapterWin from '../../components/ChapterWin.vue';
import axios from 'axios'
import { reactive, ref} from 'vue'
import { useRouter, useRoute } from 'vue-router';
import { getUserData } from '../../utils';

const router =  useRouter()

// 获得用户信息
// 获得用户信息
let userData = {
    Token: '',
    avatar: '',
    id: '',
    role: ''
}
if (getUserData() != undefined) {
    userData = getUserData();
}

const route = useRoute()

//得到课程信息
const courseData = ref({
    courseName: '',
    hostTeacher: '',
    isPermanent: '',
    startDate: '',
    endDate: '',
    member: [],
    files: [],
    courseIntroduction: '',
    coursePre: '',
    courseReq: '',
    instructors: [],
    courseCatalogue: {},
})

const cid = route.params.cid
let courseCon = ref()
let member = ref()
//得到信息
axios({
    headers: {
        Token: userData.Token
    },
    method: 'get',
    url: 'http://api.linwine.space/api/sjk/tec/course/'+cid,
    responseType: "json",
}).then((data) => {
    console.log(data);
    courseData.value = data.data.data
    console.log(courseData.value);
    member.value = courseData.value.students
    if (courseData.value.isPermanent == 0) {
        courseData.value.startDate = courseData.value.startDate.split(' ')[0];
        courseData.value.endDate = courseData.value.endDate.split(' ')[0];
    }
    else {
        courseData.value.startDate = '—————'
        courseData.value.endDate = '—————'
    }
    let ary = []
    ary.splice(0, 1, courseData.value.coursePre)
    ary.splice(1, 1, courseData.value.courseReq)
    courseCon.value = ary
})

//编辑教师人
const teacherTableIndex = ref(0)

//更新教师
const changeTeacherTable = function(newVal){
    // courseData.tId = newVal
}

const isCourseContentEdit = ref(true);
const courseContentEdit = function () {
    isCourseContentEdit.value = false
}

const catalogueEdit = ref(true)

//查看目录视图
const dialogVisible = ref(false)

//关闭目录视图
const close = function () {
    dialogVisible.value = false
    showMemberWin.value = false
}

//查看成员
const showMemberWin = ref(false)
const showMember = function () {
    showMemberWin.value = true;
}

</script>
<style scoped>
.bigBox {
    width: 100%;
    height: 100%;
    background-color: white;
    padding: 4.6%;
    padding-top: 3.8%;
}

.info {
    width: 100%;
    height: 200px;
    display: flex;
}

.pic {
    width: 14.8%;
    height: 199px;
    background-color: #e1e1e1;
}

.infoText {
    width: 78%;
    margin-left: 6.8%;
    height: 100%;
    padding-bottom: 5%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.title {
    font-family: Source Han Sans CN;
    font-size: 1.8em;
    font-weight: bolder;
    font-stretch: normal;
    letter-spacing: 0px;
    display: flex;
    justify-content: space-between;
    color: #707070;
}

.showMember {
    position: absolute;
    width: 160px;
    height: 36px;
    background-color: #8493a6;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    border-radius: 6px;
    right: 0%;
    border: 0px;
    cursor: pointer;
    outline: none;
    font-family: Source Han Sans CN;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 27px;
    letter-spacing: 0px;
    color: #fafafa;
}

.showMember:hover {
    background-color: #707070;
    transition: 0.2s;
}

.edit {
    font-size: 1em;
    color: #9eaab9;
    cursor: pointer;
    width: 9%;
    display: flex;
    justify-content: flex-end;
}

.edit span:hover {
    color: #707070;
}

.principal,
.deadline {
    margin-right: 3%;
    font-family: Source Han Sans CN;
    font-size: 1.3em;
    font-weight: bold;
    font-stretch: normal;
    line-height: 37px;
    letter-spacing: 0px;
    color: #707070;
    width: 100%;
}

.date {
    width: 230px;
    height: 40px;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    border-radius: 6px;
    border: solid 1px #707070;
    opacity: 0.8;
    background: url(../../assets/images/teacher/editCourse/time.svg) no-repeat 10px center;
    display: inline-block;
    margin-left: 3.5%;
    padding-left: 45px;
    font-family: Source Han Sans CN;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 38px;
    letter-spacing: 0px;
    color: #707070;
    margin-top: 50px;
}

.teacherList {
    width: 100%;
}

.subTitle {
    display: flex;
    justify-content: space-between;
    margin-top: 3%;
    align-items: flex-end;
}

.subTitleText {
    font-family: Source Han Sans CN;
    font-size: 1.3em;
    font-weight: bolder;
    font-stretch: normal;
    line-height: 37px;
    letter-spacing: 0px;
    color: #707070;
}

.teacherTable {
    width: 100%;
    height: 251px;
    margin-top: 1%;
}

.courseTable{
    width: 100%;
    min-height: 361px;
    margin-top: 1%;
}
.chapterTable{
    width: 100%;
}
.but {
    display: flex;
    justify-content: flex-end;
    margin-top: 27px;
}

.but button {
    width: 160px;
    height: 36px;
    background-color: #8493a6;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    border-radius: 6px;
    font-family: Source Han Sans CN;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 27px;
    letter-spacing: 0px;
    color: #fafafa;
    border: 0px;
    cursor: pointer;
}

.but button:hover {
    background-color: #707070;
}

.classContent {
    min-height: 605px;
}
</style>